import {
  FundProjectionScreenOutlined,
  AppstoreOutlined,
  BarChartOutlined,
  CloudOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingFilled,
  TeamOutlined,
  MenuOutlined,
  UserOutlined,
  DesktopOutlined,
  BoxPlotOutlined,
  InboxOutlined,
  FireFilled,
  ToolFilled,
  ToolOutlined,
} from "@ant-design/icons";
import { Menu, theme, Dropdown, Tooltip, Avatar, Drawer } from "antd";
import React, { useState, useEffect } from "react";
import { Outlet, useLocation, history, useOutletContext, useModel } from "umi";
import { doFetch } from "@/utils/doFetch";
import Fade from "react-reveal/Fade";
import Headers from "./components/Header";
import "./index.less";
import IconFont from "@/components/IconFont";

const Dashboard = () => {
  const [open, setopen] = useState(false);
  const [items, setitems] = useState([]);
  const {
    token: {
      colorBgContainer,
      colorTextBase,
      colorBgSecondary,
      colorPrimary,
      colorBgThird,
      colorBorder,
    },
  } = theme.useToken();

  const {
    initialState: { currentUser, fetchUserInfo },
    setInitialState,
  } = useModel("@@initialState");

  const { mode } = useOutletContext();
  const { pathname } = useLocation();

  useEffect(() => {
    let path = [
      {
        label: "智慧大屏",
        key: "/dashboard",
        icon: <FundProjectionScreenOutlined />,
      },
      {
        label: "远程控制",
        key: "/controls",
        icon:<BoxPlotOutlined />
      },
      {
        label: "电动自行车",
        key: "/ebikepro",
        icon: <IconFont type="icon-diandongche" />,
      },
      {
        label: "物联监测",
        key: "/device",
        icon: <InboxOutlined />,
        children: [
          {
            label: "设备台账",
            key: "/device/list",
          },
          {
            label: "设备类型",
            key: "/device/type",
          },
          {
            label: "备件管理",
            key: "/device/spare",
          },
        ],
      },
      {
        label: "维保管理",
        key: "/verb",
        icon: <ToolOutlined />,
        children: [
          {
            label: "维保合同",
            key: "/verb/contract",
          },
          {
            label: "维保计划",
            key: "/verb/plan",
          },
        ],
      },
      {
        label: "微型消防站",
        key: "/micro",
        icon: <FireFilled />
      },
      {
        label: "教育培训",
        key: "/education",
        icon: <DesktopOutlined />,
      },
      {
        label: "系统管理",
        key: "/system",
        icon: <SettingFilled />,
        children: [
          {
            label: "用户管理",
            key: "/system/users",
          },
          {
            label: "角色管理",
            key: "/system/roles",
          },
          {
            label: "权限管理",
            key: "/system/permissions",
          },
          // {
          //   label: "设备管理",
          //   key: "/system/devices",
          // },
          {
            label: "供应商管理",
            key: "/system/suppliers",
          },
          {
            label: "街道/小区管理",
            key: "/system/street",
          },
          // {
          //   name: "退货单",
          //   path: "/report",
          //   component: "./report",
          // },
        ],
      },
    ];
    setitems(
      path?.map((it) => {
        const menus = currentUser?.menus?.map?.((item) => item?.menu_key);
        if (!it?.children) {
          return menus?.includes(it?.key) ? it : null;
        } else {
          let res = it?.children?.filter((its) => menus?.includes(its?.key));
          return res?.length === 0
            ? null
            : {
                ...it,
                children: it?.children?.filter((its) =>
                  menus?.includes(its?.key)
                ),
              };
        }
      })
    );
  }, [pathname, currentUser]);

  const MenuDOM = (
    <div
      style={{
        padding: "0 12px",
        display: "flex",
        flex: 1,
        gap: 36,
        position: "relative",
      }}
    >
      <div
        className="centerl"
        style={{ cursor: "pointer" }}
        onClick={() => {
          history.push("/dashboard");
        }}
      >
        <div
          style={{
            position: "absolute",
            left: 0,
            top:-10,
            backgroundColor: "rgb(255 255 255 / 15%)",
            width: 65,
            height: 65,
          }}
          className="center"
        >
          <img
            src="./logo.png"
            alt=""
            style={{
              width: 32,
            }}
          />
        </div>

        <div
          className="centerl"
          style={{
            flex: 1,
            overflow: "hidden",
            height: 40,
            fontSize: 18,
            fontWeight: "bold",
            paddingLeft:75
          }}
        >
          <Fade duration={400} left cascade>
            消防安全智能体
          </Fade>
        </div>
      </div>

      <div style={{ flex: 1 }}>
        <Menu
          theme={mode}
          mode="horizontal"
          selectedKeys={[pathname]}
          // defaultOpenKeys={["/" + pathname.split("/")[1]]}
          items={items}
          onClick={(e) => {
            history.push(e.key);
          }}
          style={{ background: "transparent", color: "#fff" }}
        />
      </div>
      {/* <div
        className="spread"
        style={{
          width: "100%",
          padding: 8,
          flexDirection: collapsed && !open ? "column" : "row",
        }}
      >
        <Tooltip title="退出登录" placement="right">
          <div
            className="sorts"
            style={{
              "--color":
                mode === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
            }}
            onClick={() => {
              //判断退出逻辑
              localStorage.removeItem("TOKENSTRING");
              setInitialState((s) => ({
                ...s,
                currentUser: null,
              }));
              history.push("/user/login");
            }}
          >
            <LogoutOutlined style={{ fontSize: 18, color: "#ff4800" }} />
          </div>
        </Tooltip>
        <div style={{ marginTop: collapsed ? 14 : 0 }}>
          <div
            className="sorts"
            style={{
              "--color":
                mode === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)",
            }}
          >
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: () => setCollapsed(!collapsed),
              }
            )}
          </div>
        </div>
      </div> */}
    </div>
  );

  return (
    <div
      className="contained"
      style={{
        "--bgcolor": mode === "light" ? "#fff" : "rgba(255,255,255,0.1)",
        height: "100%",
        overflow: "hidden",
        color: "#ffffff",
      }}
    >
      <div
        className="spread"
        style={{
          borderBottom: `1px solid ${colorBorder}`,
          backgroundColor: "#0F0F0F",
        }}
      >
        {MenuDOM}

        <Headers currentUser={currentUser}>
          <img
            src="./logo.png"
            alt=""
            style={{
              width: 28,
              marginRight: 10,
            }}
            onClick={() => {
              history.push("/dashboard");
            }}
          />
        </Headers>
      </div>

      <div
        className="fate"
        style={{
          flex: 1,
          overflow: "auto",
          paddingTop: 0,
          background: colorBgContainer,
          color: colorTextBase,
          "--colorBgContainer": colorBgContainer,
          "--colorTextBase": colorTextBase,
          "--colorBgSecondary": colorBgSecondary,
          "--colorPrimary": colorPrimary,
          "--colorBgThird": colorBgThird,
        }}
      >
        <Outlet context={{ mode }}></Outlet>
      </div>
    </div>
  );
};
export default Dashboard;
